<template>
  <a-layout-sider :collapsed="props.collapsed" :trigger="null" collapsible>
    <div v-if="collapsed" class="logoTit">里欧</div>
    <div v-else class="logoTit">里欧12306售票系统</div>
    <a-menu v-model:selected-keys="selectedKeys" theme="dark" mode="inline">
      <a-menu-item
        v-for="item in menuRoutes"
        :key="item.path"
        @click="() => router.push(item.path)"
      >
        <component :is="item.meta.icon" v-if="item.meta.icon" />
        <user-outlined v-else />
        <span>{{ item.meta.title }}</span>
      </a-menu-item>
    </a-menu>
  </a-layout-sider>
</template>
<script setup lang="ts">
import routes from '@/router/router';
import { UserOutlined } from '@ant-design/icons-vue';
import { computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
const props = withDefaults(
  defineProps<{
    collapsed: boolean;
  }>(),
  {
    collapsed: false,
  }
);

// 菜单路由实现
//#region
const route = useRoute();
const router = useRouter();
// 选中的菜单项，根据当前路由
const selectedKeys = computed(() => {
  // 当前路由的path
  return [route.path];
});
const menuRoutes = computed<any[]>(() => {
  // 获取home下的所有路由
  const homeRoutes = routes.find(item => item.path === '/');
  if (homeRoutes && homeRoutes.children) {
    selectedKeys;
    return homeRoutes.children.filter(child => child.meta?.title && !child.meta?.hide);
  }
  return [];
});
//#endregion
</script>
